<template>
  <div class="custom-el-main">
    <el-container>
      <el-main>
        <div v-loading="pageLoading">
          <el-card class="el-card-title">
            <template #header>
              <div class="card-title-header">
                <span class="el-field-area-title-text">
                  <i class="el-icon-c-scale-to-original"></i>
                  {{
                    $i18n.locale === "zh-cn" ? form.flowCNName : form.flowENName
                  }}
                </span>
                <div class="el-field-title-buttons">
                  <el-button
                    icon="el-icon-d-arrow-left"
                    @click="flowEvent({ btnCode: 'cancel' })"
                    size="mini"
                    type="danger"
                    >{{ $t("table.Global_Back") }}</el-button
                  >
                  <el-button
                    v-for="item in form.buttons"
                    :key="item.id"
                    :icon="item.icon"
                    @click="flowEvent(item)"
                    size="mini"
                    :type="item.style"
                    >{{
                      $i18n.locale === "zh-cn" ? item.cnName : item.enName
                    }}</el-button
                  >
                </div>
              </div>
            </template>
            <el-scrollbar :style="autoHeight">
              <el-form size="small" :model="formdata" ref="formdata">
                <template class="title" v-for="element in form.areas">
                  <el-card
                    :key="element.id"
                    v-if="element.show"
                    :class="element.usable ? 'box-card' : 'box-card-danger'"
                    style="min-height:100px"
                  >
                    <template #header>
                      <div
                        :class="
                          element.usable ? 'card-header' : 'card-header-danger'
                        "
                      >
                        <span class="el-field-area-text">
                          <i class="el-icon-postcard"></i>
                          {{
                            $i18n.locale === "zh-cn"
                              ? element.areaCNName
                              : element.areaENName
                          }}
                        </span>
                        <el-tooltip
                          placement="right-start"
                          v-if="element.mainTable == ''"
                          effect="light"
                        >
                          <template #content>
                            <el-tag
                              effect="dark"
                              size="mini"
                              style="margin-left: 5px; margin-top: 5px;"
                              :type="element.usable ? '' : 'danger'"
                            >
                              {{ $t("formi18n.form_tables") }}：{{
                                element.areaCNName
                              }}
                            </el-tag>
                            <br />
                            <el-tag
                              effect="dark"
                              size="mini"
                              style="margin-left: 5px; margin-top: 5px; "
                              :type="element.usable ? '' : 'danger'"
                            >
                              {{ $t("formi18n.form_tables_en") }}：{{
                                element.areaENName
                              }}
                            </el-tag>
                            <br />
                            <el-tag
                              effect="dark"
                              size="mini"
                              style="margin-left: 5px; margin-top: 5px;"
                              :type="element.usable ? '' : 'danger'"
                            >
                              {{ $t("formi18n.form_main") }}：{{
                                element.tableCode
                              }}
                            </el-tag>
                          </template>
                          <el-tag
                            size="mini"
                            :type="element.usable ? '' : 'danger'"
                            style="margin-left: 5px;"
                            effect="dark"
                            >{{ $t("formi18n.form_main") }}</el-tag
                          >
                        </el-tooltip>
                        <el-tooltip
                          placement="right-start"
                          v-else
                          effect="light"
                        >
                          <template #content>
                            <el-tag
                              effect="dark"
                              size="mini"
                              style="margin-left: 5px; margin-top: 5px;"
                              :type="element.usable ? 'warning' : 'danger'"
                            >
                              {{ $t("formi18n.form_tables") }}：{{
                                element.mainTableName
                              }}
                            </el-tag>
                            <br />
                            <el-tag
                              effect="dark"
                              size="mini"
                              style="margin-left: 5px; margin-top: 5px; "
                              :type="element.usable ? 'warning' : 'danger'"
                            >
                              {{ $t("formi18n.form_tables_en") }}：{{
                                element.mainTableENName
                              }}
                            </el-tag>
                            <br />
                            <el-tag
                              effect="dark"
                              size="mini"
                              style="margin-left: 5px; margin-top: 5px;"
                              :type="element.usable ? 'warning' : 'danger'"
                            >
                              {{ $t("formi18n.form_main") }}：{{
                                element.mainTable
                              }}
                            </el-tag>
                          </template>
                          <el-tag
                            effect="dark"
                            size="mini"
                            style="margin-left: 5px;"
                            :type="element.usable ? 'warning' : 'danger'"
                            >{{ $t("formi18n.form_child_table") }}</el-tag
                          >
                        </el-tooltip>
                      </div>
                    </template>
                    <div v-if="!element.records">
                      <template v-for="item in element.fields">
                        <el-col
                          :key="item.id"
                          :class="
                            element.usable
                              ? 'el-field-area-close'
                              : 'el-field-area-close-danger'
                          "
                          :style="
                            'width:' +
                              calculatewidth(
                                item.controlsType,
                                element.columnes
                              ) +
                              '%'
                          "
                          v-if="item.show"
                        >
                          <el-form-item
                            v-if="
                              item.controlsType === 'image' ||
                                item.controlsType === 'avatar'
                            "
                            :label="
                              $i18n.locale == 'zh-cn'
                                ? item.cnName
                                : item.enName
                            "
                            label-position="left"
                            label-width="180px"
                            style="margin-bottom: 0px;"
                            :class="
                              element.usable && item.usable
                                ? 'el-feild-fields-item'
                                : 'el-feild-fields-delete-item '
                            "
                          >
                            <el-avatar
                              :size="67"
                              :src="
                                formdata[element.areaCode].data[item.fieldKey]
                                  .fieldValue
                              "
                              style="float:left;"
                            ></el-avatar>
                          </el-form-item>
                          <el-form-item
                            v-else
                            :label="
                              $i18n.locale == 'zh-cn'
                                ? item.cnName
                                : item.enName
                            "
                            label-position="left"
                            label-width="180px"
                            :class="
                              element.usable && item.usable
                                ? 'el-feild-fields-item'
                                : 'el-feild-fields-delete-item '
                            "
                            :rules="item.rules"
                            :prop="
                              element.areaCode +
                                '.data.' +
                                item.fieldKey +
                                '.fieldValue'
                            "
                          >
                            <el-input
                              v-if="item.controlsType == 'text'"
                              type="text"
                              :disabled="!item.editor"
                              :minlength="0"
                              :maxlength="item.fLength"
                              v-model="
                                formdata[element.areaCode].data[item.fieldKey]
                                  .fieldValue
                              "
                            ></el-input>
                            <el-input
                              v-if="
                                item.controlsType === 'textarea' && item.show
                              "
                              type="textarea"
                              :disabled="!item.editor"
                              :rows="3"
                              :minlength="0"
                              :maxlength="item.fLength"
                              v-model="
                                formdata[element.areaCode].data[item.fieldKey]
                                  .fieldValue
                              "
                            ></el-input>
                            <el-input
                              v-if="item.controlsType == 'number' && item.show"
                              type="number"
                              :max="item.max"
                              :min="item.min"
                              :disabled="!item.editor"
                              v-model="
                                formdata[element.areaCode].data[item.fieldKey]
                                  .fieldValue
                              "
                            ></el-input>
                            <el-date-picker
                              v-if="item.controlsType == 'month' && item.show"
                              v-model="
                                formdata[element.areaCode].data[item.fieldKey]
                                  .fieldValue
                              "
                              type="month"
                              :placeholder="
                                $t(
                                  'flowi18n.flow_line_property_datepicker_month'
                                )
                              "
                              :disabled="!item.editor"
                            ></el-date-picker>
                            <el-date-picker
                              v-if="item.controlsType == 'year' && item.show"
                              v-model="
                                formdata[element.areaCode].data[item.fieldKey]
                                  .fieldValue
                              "
                              type="year"
                              :placeholder="
                                $t(
                                  'flowi18n.flow_line_property_datepicker_year'
                                )
                              "
                            ></el-date-picker>
                            <el-date-picker
                              v-if="
                                (item.controlsType == 'date' ||
                                  item.controlsType == 'day') &&
                                  item.show
                              "
                              type="date"
                              :placeholder="
                                $t(
                                  'flowi18n.flow_line_property_datepicker_date'
                                )
                              "
                              :disabled="!item.editor"
                              v-model="
                                formdata[element.areaCode].data[item.fieldKey]
                                  .fieldValue
                              "
                            ></el-date-picker>
                            <el-date-picker
                              v-if="
                                item.controlsType == 'datetime' && item.show
                              "
                              type="datetime"
                              :placeholder="
                                $t(
                                  'flowi18n.flow_line_property_datepicker_datetime'
                                )
                              "
                              v-model="
                                formdata[element.areaCode].data[item.fieldKey]
                                  .fieldValue
                              "
                              :disabled="!item.editor"
                            ></el-date-picker>
                            <el-time-picker
                              v-if="item.controlsType == 'time' && item.show"
                              :disabled="!item.editor"
                              :placeholder="
                                $t(
                                  'flowi18n.flow_line_property_datepicker_time'
                                )
                              "
                              v-model="
                                formdata[element.areaCode].data[item.fieldKey]
                                  .fieldValue
                              "
                            ></el-time-picker>
                            <!-- 系统控件 -->
                            <div
                              :class="{
                                'el-slected-editor-disabled': !item.editor,
                              }"
                            >
                              <el-select
                                @remove-tag="
                                  this.flowfun.$clearValue(
                                    $event,
                                    formdata[element.areaCode].data[
                                      item.fieldKey
                                    ]
                                  )
                                "
                                @clear="
                                  formdata[element.areaCode].data[
                                    item.fieldKey
                                  ].fieldValues = []
                                "
                                v-model="
                                  formdata[element.areaCode].data[item.fieldKey]
                                    .fieldValue
                                "
                                multiple
                                style="width:90%"
                                v-if="
                                  (item.controlsType == 'employee' ||
                                    item.controlsType == 'organizational' ||
                                    item.controlsType == 'position' ||
                                    item.controlsType == 'parameter' ||
                                    item.controlsType == 'unit') &&
                                    item.show
                                "
                                collapse-tags
                                :placeholder="
                                  $t(
                                    'formi18n.field_property_selectType_select'
                                  )
                                "
                              >
                                <el-option
                                  v-for="oitem in formdata[element.areaCode]
                                    .data[item.fieldKey].fieldValues"
                                  :key="oitem.value"
                                  :label="
                                    this.$i18n.locale === 'zh-cn'
                                      ? oitem.cnName
                                      : oitem.enName
                                  "
                                  :value="oitem.value"
                                  :disabled="1 == 1"
                                ></el-option>
                              </el-select>
                              <el-button
                                v-if="
                                  (item.controlsType == 'employee' ||
                                    item.controlsType == 'organizational' ||
                                    item.controlsType == 'position' ||
                                    item.controlsType == 'parameter' ||
                                    item.controlsType == 'unit') &&
                                    item.show
                                "
                                circle
                                icon="el-icon-plus"
                                plain
                                type="primary"
                                @click="
                                  dialogAddSystemControl(
                                    item,
                                    formdata[element.areaCode].data[
                                      item.fieldKey
                                    ],
                                    element.areaCode
                                  )
                                "
                                :disabled="!item.editor"
                              ></el-button>
                            </div>
                          </el-form-item>
                        </el-col>
                      </template>
                    </div>
                    <div v-else class="el-table-body-areas">
                      <el-table
                        :data="formdata[element.areaCode].tables"
                        style="width: 100%"
                        size="mini"
                        border
                        v-if="element.presentation === 1"
                      >
                        <template v-for="field in element.fields">
                          <el-table-column
                            :width="calculateTablewidth(element.fields)"
                            align="left"
                            v-if="field.show"
                            :key="field.key"
                          >
                            <template #header>
                              <span class="el-field-span-text">
                                {{
                                  $i18n.locale == "zh-cn"
                                    ? field.cnName
                                    : field.enName
                                }}
                              </span>
                            </template>
                            <template #default="scope">
                              <el-form-item
                                size="mini"
                                :class="
                                  element.usable && field.usable
                                    ? 'el-feild-table-fields-item'
                                    : 'el-feild-table-fields-delete-item'
                                "
                                :rules="field.rules"
                                :prop="
                                  element.areaCode +
                                    '.tables.' +
                                    scope.$index +
                                    '.' +
                                    field.fieldKey +
                                    '.fieldValue'
                                "
                                :label="' '"
                                label-width="2px"
                              >
                                <el-input
                                  v-if="field.controlsType == 'text'"
                                  type="text"
                                  :disabled="!field.editor"
                                  :minlength="0"
                                  :maxlength="field.fLength"
                                  v-model="scope.row[field.fieldKey].fieldValue"
                                  style="width:90%"
                                ></el-input>
                                <el-input
                                  v-if="
                                    field.controlsType === 'textarea' &&
                                      field.show
                                  "
                                  type="textarea"
                                  :disabled="!field.editor"
                                  :rows="3"
                                  :minlength="0"
                                  :maxlength="field.fLength"
                                  v-model="scope.row[field.fieldKey].fieldValue"
                                ></el-input>
                                <el-input
                                  v-if="
                                    field.controlsType == 'number' && field.show
                                  "
                                  type="number"
                                  :max="field.max"
                                  :min="field.min"
                                  :disabled="!field.editor"
                                  v-model="scope.row[field.fieldKey].fieldValue"
                                ></el-input>
                                <el-date-picker
                                  v-if="
                                    field.controlsType == 'month' && field.show
                                  "
                                  v-model="scope.row[field.fieldKey].fieldValue"
                                  type="month"
                                  :placeholder="
                                    $t(
                                      'flowi18n.flow_line_property_datepicker_month'
                                    )
                                  "
                                  :disabled="!field.editor"
                                ></el-date-picker>
                                <el-date-picker
                                  v-if="
                                    field.controlsType == 'year' && field.show
                                  "
                                  v-model="scope.row[field.fieldKey].fieldValue"
                                  type="year"
                                  :placeholder="
                                    $t(
                                      'flowi18n.flow_line_property_datepicker_year'
                                    )
                                  "
                                ></el-date-picker>
                                <el-date-picker
                                  v-if="
                                    (field.controlsType == 'date' ||
                                      field.controlsType == 'day') &&
                                      field.show
                                  "
                                  type="date"
                                  :placeholder="
                                    $t(
                                      'flowi18n.flow_line_property_datepicker_date'
                                    )
                                  "
                                  :disabled="!field.editor"
                                  v-model="scope.row[field.fieldKey].fieldValue"
                                ></el-date-picker>
                                <el-date-picker
                                  v-if="
                                    field.controlsType == 'datetime' &&
                                      field.show
                                  "
                                  type="datetime"
                                  :placeholder="
                                    $t(
                                      'flowi18n.flow_line_property_datepicker_datetime'
                                    )
                                  "
                                  :disabled="!field.editor"
                                ></el-date-picker>
                                <el-time-picker
                                  v-if="
                                    field.controlsType == 'time' && field.show
                                  "
                                  :disabled="!field.editor"
                                  :placeholder="
                                    $t(
                                      'flowi18n.flow_line_property_datepicker_time'
                                    )
                                  "
                                  v-model="scope.row[field.fieldKey].fieldValue"
                                ></el-time-picker>
                                <!-- 系统控件 -->
                                <div
                                  :class="{
                                    'el-slected-editor-disabled': !field.editor,
                                  }"
                                >
                                  <el-select
                                    @remove-tag="
                                      this.flowfun.$clearValue(
                                        $event,
                                        scope.row[field.fieldKey]
                                      )
                                    "
                                    @clear="
                                      scope.row[field.fieldKey].fieldValues = []
                                    "
                                    v-model="
                                      scope.row[field.fieldKey].fieldValue
                                    "
                                    multiple
                                    style="width:80%"
                                    v-if="
                                      (field.controlsType == 'employee' ||
                                        field.controlsType ==
                                          'organizational' ||
                                        field.controlsType == 'position' ||
                                        field.controlsType == 'parameter' ||
                                        field.controlsType == 'unit') &&
                                        field.show
                                    "
                                    collapse-tags
                                    :placeholder="
                                      $t(
                                        'formi18n.field_property_selectType_select'
                                      )
                                    "
                                  >
                                    <el-option
                                      v-for="oitem in scope.row[field.fieldKey]
                                        .fieldValues"
                                      :key="oitem.value"
                                      :label="
                                        this.$i18n.locale === 'zh-cn'
                                          ? oitem.cnName
                                          : oitem.enName
                                      "
                                      :value="oitem.value"
                                      :disabled="1 == 1"
                                    ></el-option>
                                  </el-select>
                                  <el-button
                                    v-if="
                                      (field.controlsType == 'employee' ||
                                        field.controlsType ==
                                          'organizational' ||
                                        field.controlsType == 'position' ||
                                        field.controlsType == 'parameter' ||
                                        field.controlsType == 'unit') &&
                                        field.show
                                    "
                                    circle
                                    icon="el-icon-plus"
                                    plain
                                    type="primary"
                                    @click="
                                      dialogTableAddSystemControl(
                                        field,
                                        scope.row,
                                        element.areaCode
                                      )
                                    "
                                    :disabled="!field.editor"
                                  ></el-button>
                                </div>
                              </el-form-item>
                            </template>
                          </el-table-column>
                        </template>
                        <el-table-column
                          align="center"
                          width="120px"
                          fixed="right"
                        >
                          <template #header>
                            <span class="el-field-span-text">
                              {{ $t("i18n.common_operation") }}
                            </span>
                          </template>
                          <template #default="scope">
                            <el-button
                              type="primary"
                              icon="el-icon-plus"
                              circle
                              style="margin-right:0px"
                              @click="addNode(scope.row, element)"
                              size="mini"
                              plain
                              :disabled="!element.editor"
                            ></el-button>
                            <el-button
                              type="danger"
                              icon="el-icon-delete"
                              circle
                              style="margin-left:2px"
                              @click="removeNode(scope.row, element)"
                              size="mini"
                              plain
                              :disabled="!element.editor"
                            ></el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                      <template v-else>
                        <template
                          v-for="(record, index) in formdata[element.areaCode]
                            .tables"
                          :key="index"
                        >
                          <template v-for="field in element.fields">
                            <el-col
                              :key="field.id"
                              :class="
                                element.usable
                                  ? 'el-field-area-close'
                                  : 'el-field-area-close-danger'
                              "
                              :style="
                                'width:' +
                                  calculatewidth(
                                    field.controlsType,
                                    element.columnes
                                  ) +
                                  '%'
                              "
                              v-if="field.show"
                            >
                              <el-form-item
                                :label="
                                  $i18n.locale == 'zh-cn'
                                    ? field.cnName
                                    : field.enName
                                "
                                label-position="left"
                                label-width="180px"
                                :class="
                                  element.usable && field.usable
                                    ? 'el-feild-fields-item'
                                    : 'el-feild-fields-delete-item '
                                "
                                :rules="field.rules"
                                :prop="
                                  element.areaCode +
                                    '.tables.' +
                                    index +
                                    '.' +
                                    field.fieldKey +
                                    '.fieldValue'
                                "
                                size="small"
                              >
                                <el-input
                                  v-if="field.controlsType == 'text'"
                                  type="text"
                                  :disabled="!field.editor"
                                  :minlength="0"
                                  :maxlength="field.fLength"
                                  v-model="record[field.fieldKey].fieldValue"
                                  style="width:90%"
                                ></el-input>
                                <el-input
                                  v-if="
                                    field.controlsType === 'textarea' &&
                                      field.show
                                  "
                                  type="textarea"
                                  :disabled="!field.editor"
                                  :rows="3"
                                  :minlength="0"
                                  :maxlength="field.fLength"
                                  v-model="record[field.fieldKey].fieldValue"
                                ></el-input>
                                <el-input
                                  v-if="
                                    field.controlsType == 'number' && field.show
                                  "
                                  type="number"
                                  :max="field.max"
                                  :min="field.min"
                                  :disabled="!field.editor"
                                  v-model="record[field.fieldKey].fieldValue"
                                ></el-input>
                                <el-date-picker
                                  v-if="
                                    field.controlsType == 'month' && field.show
                                  "
                                  v-model="record[field.fieldKey].fieldValue"
                                  type="month"
                                  :placeholder="
                                    $t(
                                      'flowi18n.flow_line_property_datepicker_month'
                                    )
                                  "
                                  :disabled="!field.editor"
                                ></el-date-picker>
                                <el-date-picker
                                  v-if="
                                    field.controlsType == 'year' && field.show
                                  "
                                  v-model="record[field.fieldKey].fieldValue"
                                  type="year"
                                  :placeholder="
                                    $t(
                                      'flowi18n.flow_line_property_datepicker_year'
                                    )
                                  "
                                ></el-date-picker>
                                <el-date-picker
                                  v-if="
                                    (field.controlsType == 'date' ||
                                      field.controlsType == 'day') &&
                                      field.show
                                  "
                                  type="date"
                                  :placeholder="
                                    $t(
                                      'flowi18n.flow_line_property_datepicker_date'
                                    )
                                  "
                                  :disabled="!field.editor"
                                  v-model="record[field.fieldKey].fieldValue"
                                ></el-date-picker>
                                <el-date-picker
                                  v-if="
                                    field.controlsType == 'datetime' &&
                                      field.show
                                  "
                                  type="datetime"
                                  :placeholder="
                                    $t(
                                      'flowi18n.flow_line_property_datepicker_datetime'
                                    )
                                  "
                                  :disabled="!field.editor"
                                ></el-date-picker>
                                <el-time-picker
                                  v-if="
                                    field.controlsType == 'time' && field.show
                                  "
                                  :disabled="!field.editor"
                                  :placeholder="
                                    $t(
                                      'flowi18n.flow_line_property_datepicker_time'
                                    )
                                  "
                                  v-model="record[field.fieldKey].fieldValue"
                                ></el-time-picker>
                                <!-- 系统控件 -->
                                <div
                                  :class="{
                                    'el-slected-editor-disabled': !field.editor,
                                  }"
                                >
                                  <el-select
                                    @remove-tag="
                                      this.flowfun.$clearValue(
                                        $event,
                                        record[field.fieldKey]
                                      )
                                    "
                                    @clear="
                                      record[field.fieldKey].fieldValues = []
                                    "
                                    v-model="record[field.fieldKey].fieldValue"
                                    multiple
                                    style="width:80%"
                                    v-if="
                                      (field.controlsType == 'employee' ||
                                        field.controlsType ==
                                          'organizational' ||
                                        field.controlsType == 'position' ||
                                        field.controlsType == 'parameter' ||
                                        field.controlsType == 'unit') &&
                                        field.show
                                    "
                                    collapse-tags
                                    :placeholder="
                                      $t(
                                        'formi18n.field_property_selectType_select'
                                      )
                                    "
                                  >
                                    <el-option
                                      v-for="oitem in record[field.fieldKey]
                                        .fieldValues"
                                      :key="oitem.value"
                                      :label="
                                        this.$i18n.locale === 'zh-cn'
                                          ? oitem.cnName
                                          : oitem.enName
                                      "
                                      :value="oitem.value"
                                      :disabled="1 == 1"
                                    ></el-option>
                                  </el-select>
                                  <el-button
                                    v-if="
                                      (field.controlsType == 'employee' ||
                                        field.controlsType ==
                                          'organizational' ||
                                        field.controlsType == 'position' ||
                                        field.controlsType == 'parameter' ||
                                        field.controlsType == 'unit') &&
                                        field.show
                                    "
                                    circle
                                    icon="el-icon-plus"
                                    plain
                                    type="primary"
                                    @click="
                                      dialogTableAddSystemControl(
                                        field,
                                        record,
                                        element.areaCode
                                      )
                                    "
                                    :disabled="!field.editor"
                                  ></el-button>
                                </div>
                              </el-form-item>
                            </el-col>
                          </template>
                          <el-row style="width:100%">
                            <div style="width:100%" v-if="element.editor">
                              <el-button
                                type="danger"
                                icon="el-icon-delete"
                                circle
                                style="margin:10px 5px 15px 5px;float:right"
                                @click="removeNode(record, element)"
                                size="mini"
                                plain
                                :disabled="!element.editor"
                              ></el-button>
                              <el-button
                                type="primary"
                                icon="el-icon-plus"
                                circle
                                style="margin:10px 5px 15px 5px;float:right"
                                @click="addNode(record, element)"
                                size="mini"
                                plain
                                :disabled="!element.editor"
                              ></el-button>
                            </div>
                            <el-divider
                              style="margin:0px 10px 20px 0px"
                              border-style="dashed"
                            ></el-divider>
                          </el-row>
                        </template>
                      </template>
                    </div>
                  </el-card>
                </template>
              </el-form>
              <el-card
                class="el-card-title"
                v-if="opinion != null && opinion.show"
                style="margin-bottom:20px"
              >
                <template #header>
                  <div class="card-title-header">
                    <span class="el-field-area-title-text">
                      <i class="el-icon-lx-searchlist"></i>
                      {{
                        $i18n.locale === "zh-cn"
                          ? "审批意见"
                          : "Approval of Opinion"
                      }}
                    </span>
                  </div>
                </template>
                <el-form :model="opinion" ref="opinion">
                  <el-form-item
                    :label="''"
                    :rules="opinion.rules"
                    prop="defaultValue"
                  >
                    <el-input
                      v-if="opinion.show"
                      type="textarea"
                      :disabled="!opinion.editor"
                      :rows="10"
                      :minlength="0"
                      :maxlength="opinion.fLength"
                      v-model="opinion.defaultValue"
                    ></el-input
                  ></el-form-item>
                </el-form>
              </el-card>
              <el-card class="el-card-title" v-if="step != null">
                <template #header>
                  <div class="card-title-header">
                    <span class="el-field-area-title-text">
                      <i class="el-icon-lx-searchlist"></i>
                      {{
                        $i18n.locale === "zh-cn"
                          ? "审批历史"
                          : "Approval of history"
                      }}
                    </span>
                  </div>
                </template>
                <el-steps
                  direction="vertical"
                  :active="step.activitStep"
                  process-status="finish"
                  finish-status="success"
                >
                  <el-step
                    :title="item.title"
                    v-for="item in step.steps"
                    :key="item.id"
                  >
                    <template #description>
                      <el-card>
                        <el-table :data="item.lists">
                          <el-table-column
                            :show-overflow-tooltip="true"
                            prop="title"
                            :label="$t('flowi18n.flow_process_step_title')"
                          ></el-table-column>
                          <el-table-column
                            :show-overflow-tooltip="true"
                            prop="dic_Sender"
                            :label="$t('flowi18n.flow_process_step_sendpeople')"
                          ></el-table-column>
                          <el-table-column
                            :show-overflow-tooltip="true"
                            prop="dic_ReceivingTime"
                            :label="$t('flowi18n.flow_process_step_senddate')"
                          ></el-table-column>
                          <el-table-column
                            :show-overflow-tooltip="true"
                            prop="dic_Reviewer"
                            :label="$t('flowi18n.flow_process_step_approval')"
                          ></el-table-column>
                          <el-table-column
                            :show-overflow-tooltip="true"
                            prop="dic_ComplatedTime"
                            :label="
                              $t('flowi18n.flow_process_step_approvaldate')
                            "
                          ></el-table-column>
                          <el-table-column
                            :show-overflow-tooltip="true"
                            prop="dic_Status"
                            :label="$t('flowi18n.flow_current_task_step_stats')"
                          ></el-table-column>
                          <el-table-column
                            :show-overflow-tooltip="true"
                            prop="dic_FlowStatus"
                            :label="$t('flowi18n.flow_process_step_note')"
                          ></el-table-column>
                        </el-table>
                      </el-card>
                    </template>
                  </el-step>
                </el-steps>
              </el-card>
            </el-scrollbar>
          </el-card>
        </div>
      </el-main>
    </el-container>
    <div class="el-dialog-content">
      <dialog-employee-componet-vue
        ref="emp"
        @confirmEvent="formDialogEvent($event, 'emp')"
      ></dialog-employee-componet-vue>
      <dialog-position-componet-vue
        ref="pos"
        @confirmEvent="formDialogEvent($event, 'pos')"
      ></dialog-position-componet-vue>
      <dialog-org-componet-vue
        ref="org"
        @confirmEvent="formDialogEvent($event, 'org')"
        :expandAll="1 == 1"
      ></dialog-org-componet-vue>
      <dialog-parameter-componet-vue
        ref="parameter"
        @confirmEvent="formDialogEvent($event, 'para')"
        :expandAll="1 == 1"
      ></dialog-parameter-componet-vue>
      <dialog-unit-componet-vue
        ref="unit"
        @confirmEvent="formDialogEvent($event, 'unit')"
        :expandAll="1 == 1"
      ></dialog-unit-componet-vue>
      <next-node-infos-componet-vue ref="node" @confirmEvent="processEvent">
      </next-node-infos-componet-vue>
      <back-node-info-componet-vue ref="backnode" @confirmEvent="processEvent">
      </back-node-info-componet-vue>
    </div>
    <el-drawer
      :append-to-body="true"
      :withHeader="false"
      v-model="showpicturedrawer"
      direction="rtl"
      size="90%"
      :before-close="handleClose"
    >
      <flow-picture-componet-vue
        v-if="showpicturedrawer"
        ref="flowpicture"
        @ClosedEvent="closedEvent"
      >
      </flow-picture-componet-vue>
    </el-drawer>
  </div>
</template>
<script>
import reqVue from "../../utils/req.vue";
import confVue from "../../utils/conf.vue";
import flowutils from "../../utils/FlowUtils";
import DialogEmployeeComponetVue from "../../components/DialogEmployeeComponet.vue";
import DialogOrgComponetVue from "../../components/DialogOrgComponet.vue";
import DialogParameterComponetVue from "../../components/DialogParameterComponet.vue";
import DialogPositionComponetVue from "../../components/DialogPositionComponet.vue";
import DialogUnitComponetVue from "../../components/DialogUnitComponet.vue";
import NextNodeInfosComponetVue from "../../components/Global/NextNodeInfosComponet.vue";
import FlowPictureComponetVue from "../../components/Global/FlowPictureComponet.vue";
import BackNodeInfoComponetVue from "../../components/Global/BackNodeInfoComponet.vue";

let windowHeight = parseInt(window.innerHeight);
let windowinnerWidth = parseInt(window.innerWidth);
export default {
  components: {
    DialogEmployeeComponetVue,
    DialogOrgComponetVue,
    DialogParameterComponetVue,
    DialogPositionComponetVue,
    DialogUnitComponetVue,
    NextNodeInfosComponetVue,
    FlowPictureComponetVue,
    BackNodeInfoComponetVue,
  },
  data() {
    return {
      windowHeight: windowHeight,
      windowinnerWidth: windowinnerWidth,
      autoHeight: {},
      outHeight: {
        height: "",
      },
      page_Title: "",
      pageType: "add",
      pageLoading: true,
      apipath: "flowcenter",
      way: confVue.$flowApi,
      form: {},
      defaulturl: require("../../assets/img/avatr.png"),
      showareadrawer: false,
      cards: [],
      showfielddrawer: false,
      flowfun: flowutils,
      formdata: {},
      applyEmpNameKey: "form_apply_employeebasicinfo$employee$cnname",
      secretKey: "",
      apiEnginepath: "flowengine",
      showpicturedrawer: false,
      step: null,
      opinion: null,
    };
  },
  mounted() {
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
  },
  created() {
    this.pageLoading = true;
    this.InitFrom();
  },
  methods: {
    closedEvent() {
      this.showpicturedrawer = false;
    },
    ///加载页面高度
    getHeight() {
      this.outHeight.height = windowHeight - 195 + "px";
      this.autoHeight.height = windowHeight - 195 + "px";
    },
    ///加载表单数据
    InitFrom() {
      let url = this.apipath + "/v1.0/formconfig/";

      reqVue
        .$Post(
          {
            flowId: this.$route.query.flowId,
            flowVersionId: this.$route.query.flowVersionId,
            formId: this.$route.query.formId,
            FormVersionId: this.$route.query.formVersionId,
            ApprovalType: this.$route.query.approvalType,
            taskId: this.$route.query.taskId,
          },
          url,
          this.way
        )
        .then(
          function(data) {
            if (data.status) {
              this.secretKey = this.flowfun.$createCode(12);
              this.initData(data.body);
              this.pageLoading = false;
            } else {
              this.$message.error(data.message);
              this.pageLoading = false;
            }
          }.bind(this)
        );
    },
    initData(config, applyEmpId) {
      let url = this.apipath + "/v1.0/formdata/";
      reqVue
        .$Post(
          {
            flowId: this.$route.query.flowId,
            flowVersionId: this.$route.query.flowVersionId,
            formId: this.$route.query.formId,
            formVersionId: this.$route.query.formVersionId,
            approvalType: this.$route.query.approvalType,
            applyEmpId: applyEmpId == undefined ? 0 : applyEmpId,
            taskId: this.$route.query.taskId,
          },
          url,
          this.way
        )
        .then(
          function(data) {
            if (data.status) {
              this.formdata = data.body;
              this.form = config;
              this.pageLoading = false;
              this.opinion = this.form.opinion;
              this.InitHistory();
            } else {
              this.$message.error(data.message);
              this.pageLoading = false;
            }
          }.bind(this)
        );
    },
    ///加载流程属性
    InitHistory() {
      let url =
        this.apipath +
        "/v2.0/history/" +
        this.$route.query.flowId +
        "/" +
        this.$route.query.flowVersionId +
        "/" +
        (this.$route.query.taskId ?? 0);
      reqVue.$Post(null, url, this.way).then(
        function(data) {
          if (data.status) {
            this.step = data.body;
          } else {
            this.$message.error(data.message);
            this.loading = false;
          }
        }.bind(this)
      );
    },
    handleClose() {},
    ///计算列宽
    calculatewidth(type, column) {
      if (type == "textarea") return 100;
      else return 100 / column;
    },
    calculateTablewidth(fields) {
      if (fields.length > 10) {
        return "120";
      } else return "";
    },
    ///流程执行
    flowEvent(btn) {
      this.flowfun.$flowEvent(btn, this);
    },
    ///弹出系统框
    dialogAddSystemControl(item, data, areaCode) {
      if (item.controlsType == "employee") {
        let emps = [];
        data.fieldValues.forEach((element) => {
          emps.push({
            empId: element.value,
            cnName: element.cnName,
            enName: element.enName,
          });
        });
        this.$refs.emp.paramters = {
          fieldKey: {
            areaCode: item.areaId,
            fieldKey: item.fieldKey,
            selectType: item.selectType,
            aCode: areaCode,
          },
          data: emps,
          exceptDataField: [],
        };
        this.$refs.emp.dialogEmpVisible = true;
        this.$refs.emp.InitData();
      }
      if (item.controlsType == "position") {
        let pos = [];
        data.fieldValues.forEach((element) => {
          pos.push({
            positionId: element.value,
            cnName: element.cnName,
            enName: element.enName,
          });
        });
        this.$refs.pos.paramters = {
          fieldKey: {
            areaCode: item.areaId,
            fieldKey: item.fieldKey,
            selectType: item.selectType,
            aCode: areaCode,
          },
          data: pos,
          exceptDataField: [],
        };
        this.$refs.pos.dialogPosVisible = true;
        this.$refs.pos.InitData();
      }
      if (item.controlsType == "organizational") {
        let orgs = [];
        data.fieldValues.forEach((element) => {
          orgs.push({
            id: element.value,
            cnName: element.cnName,
            enName: element.enName,
            orgCode: element.orgCode,
          });
        });
        this.$refs.org.paramters = {
          fieldKey: {
            areaCode: item.areaId,
            fieldKey: item.fieldKey,
            selectType: item.selectType,
            aCode: areaCode,
          },
          data: orgs,
          exceptDataField: [],
        };
        this.$refs.org.showCheckBox = true;
        this.$refs.org.dialogOrgVisible = true;
        this.$refs.org.InitData();
      }
      if (item.controlsType == "unit") {
        let orgs = [];
        data.fieldValues.forEach((element) => {
          orgs.push({
            unitId: element.value,
            cnName: element.cnName,
            enName: element.enName,
            unitCode: element.unitCode,
          });
        });
        this.$refs.unit.paramters = {
          fieldKey: {
            areaCode: item.areaId,
            fieldKey: item.fieldKey,
            selectType: item.selectType,
            checkStrictly: false,
            aCode: areaCode,
          },
          data: orgs,
          exceptDataField: [],
        };
        this.$refs.unit.showCheckBox = true;
        this.$refs.unit.dialogOrgVisible = true;
        this.$refs.unit.InitData();
      }
      if (item.controlsType == "parameter") {
        let parameter = [];
        data.fieldValues.forEach((element) => {
          parameter.push({
            parameterCode: element.value,
            cnName: element.cnName,
            enName: element.enName,
          });
        });
        this.$refs.parameter.paramters = {
          fieldKey: {
            areaCode: item.areaId,
            fieldKey: item.fieldKey,
            selectType: item.selectType,
            parameterCode: item.controlSouces,
            aCode: areaCode,
          },
          data: parameter,
          exceptDataField: [],
        };
        this.$refs.parameter.showCheckBox = true;
        this.$refs.parameter.dialogParameterVisible = true;
        this.$refs.parameter.InitData();
      }
    },
    ///弹出表格系统框
    dialogTableAddSystemControl(item, row, areaCode) {
      if (item.controlsType == "employee") {
        let emps = [];
        row[item.fieldKey].fieldValues.forEach((element) => {
          emps.push({
            empId: element.value,
            cnName: element.cnName,
            enName: element.enName,
          });
        });
        this.$refs.emp.paramters = {
          fieldKey: {
            areaCode: item.areaId,
            fieldKey: item.fieldKey,
            selectType: item.selectType,
            aCode: areaCode,
            rowTag: row.rowTag,
          },
          data: emps,
          exceptDataField: [],
        };
        this.$refs.emp.dialogEmpVisible = true;
        this.$refs.emp.InitData();
      }
      if (item.controlsType == "position") {
        let pos = [];
        row[item.fieldKey].fieldValues.forEach((element) => {
          pos.push({
            positionId: element.value,
            cnName: element.cnName,
            enName: element.enName,
          });
        });
        this.$refs.pos.paramters = {
          fieldKey: {
            areaCode: item.areaId,
            fieldKey: item.fieldKey,
            selectType: item.selectType,
            aCode: areaCode,
            rowTag: row.rowTag,
          },
          data: pos,
          exceptDataField: [],
        };
        this.$refs.pos.dialogPosVisible = true;
        this.$refs.pos.InitData();
      }
      if (item.controlsType == "organizational") {
        let orgs = [];
        row[item.fieldKey].fieldValues.forEach((element) => {
          orgs.push({
            id: element.value,
            cnName: element.cnName,
            enName: element.enName,
            orgCode: element.orgCode,
          });
        });
        this.$refs.org.paramters = {
          fieldKey: {
            areaCode: item.areaId,
            fieldKey: item.fieldKey,
            selectType: item.selectType,
            aCode: areaCode,
            rowTag: row.rowTag,
          },
          data: orgs,
          exceptDataField: [],
        };
        this.$refs.org.showCheckBox = true;
        this.$refs.org.dialogOrgVisible = true;
        this.$refs.org.InitData();
      }
      if (item.controlsType == "unit") {
        let orgs = [];
        row[item.fieldKey].fieldValues.forEach((element) => {
          orgs.push({
            id: element.value,
            cnName: element.cnName,
            enName: element.enName,
            unitCode: element.unitCode,
          });
        });
        this.$refs.unit.paramters = {
          fieldKey: {
            areaCode: item.areaId,
            fieldKey: item.fieldKey,
            selectType: item.selectType,
            aCode: areaCode,
            rowTag: row.rowTag,
          },
          data: orgs,
          exceptDataField: [],
        };
        this.$refs.unit.showCheckBox = true;
        this.$refs.unit.dialogOrgVisible = true;
        this.$refs.unit.InitData();
      }
      if (item.controlsType == "parameter") {
        let parameter = [];
        row[item.fieldKey].fieldValues.forEach((element) => {
          parameter.push({
            parameterCode: element.value,
            cnName: element.cnName,
            enName: element.enName,
          });
        });
        this.$refs.parameter.paramters = {
          fieldKey: {
            areaCode: item.areaId,
            fieldKey: item.fieldKey,
            selectType: item.selectType,
            parameterCode: item.controlSouces,
            aCode: areaCode,
            rowTag: row.rowTag,
          },
          data: parameter,
          exceptDataField: [],
        };
        this.$refs.parameter.showCheckBox = true;
        this.$refs.parameter.dialogParameterVisible = true;
        this.$refs.parameter.InitData();
      }
    },
    ///添加多记录节点
    addNode(row, element) {
      var obj = {};
      element.fields.forEach((element) => {
        obj[element.fieldKey] = {
          areaCode: row[element.fieldKey].areaCode,
          controlsType: row[element.fieldKey].controlsType,
          fieldCode: row[element.fieldKey].fieldCode,
          fieldType: row[element.fieldKey].fieldType,
          flowTableCode: row[element.fieldKey].flowTableCode,
          tableCode: row[element.fieldKey].tableCode,
          mainTable: row[element.fieldKey].mainTable,
          fieldValue:
            row[element.fieldKey].controlsType == "parameter" ||
            row[element.fieldKey].controlsType == "unit" ||
            row[element.fieldKey].controlsType == "organizational" ||
            row[element.fieldKey].controlsType == "position" ||
            row[element.fieldKey].controlsType == "employee"
              ? []
              : null,
          fieldValues: [],
          fieldTag: this.flowfun.$createCode(),
        };
      });
      obj.rowTag = this.flowfun.$createCode();
      if (element.rowes == this.formdata[element.areaCode].tables.length) {
        this.$message.error(
          this.$i18n.locale === "zh-cn"
            ? "最多只能添加" + element.rowes + "行"
            : "A maximum of " + element.rowes + " rows can be added"
        );
      } else {
        this.formdata[element.areaCode].tables.push(obj);
      }
    },
    ////移除多记录数据
    removeNode(row, element) {
      let results = this.formdata[element.areaCode].tables.filter(
        (o) => o.rowTag !== row.rowTag
      );
      this.formdata[element.areaCode].tables = results;
      if (this.formdata[element.areaCode].tables.length <= 0)
        this.addNode(row, element);
    },
    ///表单字段处理结果
    formDialogEvent(res, eventCode) {
      this.pageLoading = true;
      this.flowfun.$formDialogEvent(this, res, eventCode);
      this.pageLoading = false;
    },
    ///处理任务
    processEvent(res) {
      this.flowfun.$processEvent(res, this);
    },
  },
};
</script>
